<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中animation的实现</title>
  </head>
  <style>
    .img {
      width: 100px
    }

    /* 
    动画进入
     */
    .handsome-enter-active {
      animation: enter 1s;
    }

    /* 
    动画离开
     */
    .handsome-leave-active {
      animation: enter 1s reverse
    }

    @keyframes enter {
      0% {
        transform: scale(0)
      }

      25% {
        transform: scale(1.1)
      }

      50% {
        transform: scale(1.5)
      }

      100% {
        transform: scale(1)
      }
    }
  </style>

  <body>
    <div id="app">
      <button @click="isShow=!isShow">切换</button>
      <transition name="handsome">
        <img v-show="isShow" class="img" src="../img/shuai.jpg" alt="">
      </transition>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    Vue动画
    1.在目标元素外包裹transition,并给transition设置name属性,<transition name="XXX">
    2.编写进入动画，离开动画样式
      xxx-enter-active,xxx-leave-active
    */
    new Vue({
      el: "#app",
      data: {
        isShow: true
      }
    })
  </script>

</html>